<!--  -->
<template>


    <div class="echarts_box">
        <div class="echarts" ref="myEcharts">
        </div>
        <el-radio-group class="charttab" fill="#417ff4" v-model="tabPosition" style="margin-bottom: 30px">
            <el-radio-button value="left">最近30天</el-radio-button>
            <el-radio-button value="top">最近半年</el-radio-button>
            <el-radio-button value="right">本年</el-radio-button>
        </el-radio-group>

    </div>


</template>

<script lang='ts' setup>


import * as echarts from 'echarts';
import { ref, onMounted, watch } from 'vue';
import { getCountsList } from '../../service/repairs/repairs';
import { RepairCountParams } from '../../service/repairs/type';
import { getQCountsList } from '../../service/questions/questions';
import type { TabsInstance } from 'element-plus'
type EChartsOption = echarts.EChartsOption;

let pepairCountParams: RepairCountParams = {
    days: 30
}
//echart图表选项
const tabPosition = ref<TabsInstance['tabPosition']>('left')
watch(tabPosition, (newValue) => {

    switch (newValue) {
        case "left":
            pepairCountParams = { days: 30 }
            break;
        case "top":
            pepairCountParams = { months: 6 }
            break;
        case "right":
            pepairCountParams = { years: new Date().getFullYear() }
            break;
        default:
            break;
    }

    getCounts();


}, {})



const myEcharts = ref();
// 报修统计
const pepairCounts = ref<Array<number>>([])
const xAxis = ref<Array<string>>([])

//投诉统计
const questionsCounts = ref<Array<number>>([])

const getCounts = async () => {

    //请求报修总数
    const res: any = await getCountsList(pepairCountParams);
    if (res.errCode === 10000) {

        let series: number[] = [];
        if (tabPosition.value == "right") {
            series = res.data;
        }
        else {
            series = res.data.reverse()
        }
        pepairCounts.value = series.map((item: any) => item.counts) as Array<number>;

        xAxis.value = series.map((item: any) => item.label) as Array<string>;

    }
    //请求投诉总数
    const qres: any = await getQCountsList(pepairCountParams);
    if (qres.errCode === 10000) {

        let series: number[] = [];
        if (tabPosition.value == "right") {
            series = qres.data;
        }
        else {
            series = qres.data.reverse()
        }
        questionsCounts.value = series.map((item: any) => item.counts) as Array<number>;
    }

    initCharts();
}



// const myChart=ref();
let myChart: any = null;

const initCharts = () => {
    // var chartDom = document.getElementById('echarts')!;
    if (!myChart) myChart = echarts.init(myEcharts.value);
    let option: EChartsOption;
    option = {
        title: {
            text: '数据展示'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['报修总数', '投诉总数']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xAxis.value
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '报修总数',
                type: 'line',
                stack: 'Total',
                data: pepairCounts.value
            },
            {
                name: '投诉总数',
                type: 'line',
                stack: 'Total',
                data: questionsCounts.value
            }

        ]
    };

    option && myChart.setOption(option);
    window.onresize = myChart.resize;

}




// Vue lifecycle
onMounted(() => {
    getCounts();
})


</script>
<style scoped lang="less">
.echarts_box{
    position: relative;
}

.echarts {
    width: 100%;
    min-width: 1400px;
    height: 400px;
   
    // background-color: orange; 
}



.charttab {
    position: absolute;
    top: 0px;
    right: 50px;
}
</style>